<template>
    <div class="pb_a">

        <van-nav-bar class="head_nb" left-text="返回" left-arrow @click-left="goBack"/>

        <van-tabs class="pt_a" v-model="select_type" v-if="showScore=='0'">
            <van-tab title="按证件号查询" name="1">
                <div v-if="showScore=='0'">
                    <div class="ta_c txt_60">
                        软考成绩查询
                    </div>
                    <van-cell-group>
                        <van-field
                            readonly
                            clickable
                            label="考试时间"
                            :value="stage"
                            placeholder="请选择考试时间"
                            @click="showPicker = true"
                            required
                        />
                        <van-field
                            v-model="zjhm"
                            required
                            clearable
                            label="证件号码"
                            placeholder="请输入证件号码"
                        />
                        <van-field
                            v-model="xm"
                            label='姓名'
                            clearable
                            placeholder="请输入姓名"
                            required
                        />
                        <van-row type="flex">
                            <van-col span="16">
                                <van-field
                                    v-model="jym"
                                    label="校验码"
                                    placeholder="请输入校验码"
                                    required
                                />
                            </van-col>
                            <van-col span="8">
                                <van-image width="8rem" height="2.75rem" :src='imgUrl' @click="getCaptcha"/>
                            </van-col>
                        </van-row>
                    </van-cell-group>
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker
                            show-toolbar
                            :columns="stages"
                            @cancel="showPicker = false"
                            @confirm="onConfirm"
                        />
                    </van-popup>
                    <div class="m_20">
                        <van-button @click="search" type="primary" size="small" class="btn_100">查询</van-button>
                    </div>
                </div>
            </van-tab>

            <van-tab title="按准考证号查询" name="0">
                <div v-if="showScore=='0'">
                    <div class="ta_c txt_60">
                        软考成绩查询
                    </div>
                    <van-cell-group>
                        <van-field
                            readonly
                            clickable
                            label="考试时间"
                            :value="stage"
                            placeholder="请选择考试时间"
                            @click="showPicker = true"
                            required
                        />
                        <van-field
                            v-model="zjhm"
                            required
                            clearable
                            label="准考证号"
                            placeholder="请输入准考证号"
                        />
                        <van-field
                            v-model="xm"
                            label='姓名'
                            clearable
                            placeholder="请输入姓名"
                            required
                        />
                        <van-row type="flex">
                            <van-col span="16">
                                <van-field
                                    v-model="jym"
                                    label="校验码"
                                    placeholder="请输入校验码"
                                    required
                                />
                            </van-col>
                            <van-col span="8">
                                <van-image width="8rem" height="2.75rem" :src='imgUrl' @click="getCaptcha"/>
                            </van-col>
                        </van-row>
                    </van-cell-group>
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker
                            show-toolbar
                            :columns="stages"
                            @cancel="showPicker = false"
                            @confirm="onConfirm"
                        />
                    </van-popup>
                    <div class="m_20">
                        <van-button @click="search" type="primary" size="small" class="btn_100">查询</van-button>
                    </div>
                </div>
            </van-tab>
        </van-tabs>

        <div class="pt_a" v-if="showScore=='1'">
            <div class="ta_c txt_60">
                成绩查询结果
            </div>
            <van-cell-group>
                <van-cell title="考试时间：" v-model="score.KSSJ"/>
                <van-cell title="资格名称：" v-model="score.ZGMC"/>
                <van-cell title="准考证号：" v-model="score.ZKZH"/>
                <van-cell title="证件号：" v-model="score.ZJH" width="100%"/>
                <van-cell title="姓名：" v-model="score.XM"/>
                <van-cell title="上午成绩：" v-model="score.SWCJ"/>
                <van-cell title="下午成绩：" v-model="score.XWCJ"/>
                <van-cell title="论文成绩：" v-model="score.LWCJ" v-if="score.LWCJ != '-'"/>
            </van-cell-group>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import common from '../../../common/common';
    import {getScore, verifyCaptcha} from '../../../api';
    import {Cell, CellGroup, Field, Image, Picker, Popup, Tab, Tabs} from 'vant';

    Vue.use(Field).use(CellGroup).use(Picker).use(Popup).use(Image).use(Cell).use(Tab).use(Tabs);
    export default {
        name: "score",
        data() {
            return {
                xm: '',
                stage: '',
                jym: '',
                zjhm: '',
                select_type: '1',
                score: {},
                showPicker: false,
                showScore: '0',
                imgUrl: 'api/public/captcha',
                stages: []
            }
        },
        mounted() {
            let nowYear = new Date().getFullYear();
            for (let i = 5; i >= 0; i--) {
                this.stages.push(nowYear - i + "年上半年");
                this.stages.push(nowYear - i + "年下半年");
            }
        },
        methods: {
            async search() {
                //表单校验
                const {stage, zjhm, xm, jym, select_type} = this;
                if (stage == '') {
                    common.toast('fail', '考试时间不能为空！');
                    return;
                }
                if (zjhm == '') {
                    if (select_type == '0') {
                        common.toast('fail', '准考证号不能为空！');
                        return;
                    } else {
                        common.toast('fail', '证件号码不能为空！');
                        return;
                    }
                }
                if (xm == '') {
                    common.toast('fail', '姓名不能为空！');
                    return;
                }
                if (jym == '') {
                    common.toast('fail', '校验码不能为空！');
                    return;
                }
                //发起请求,校验验证码是否正确
                let result = await verifyCaptcha({jym});
                if (result.flag == "0") {
                    common.toast('fail', result.msg);
                    return;
                }
                if (result.flag == "1") {
                    result = await getScore({stage, zjhm, xm, jym, select_type});
                    if (result.flag != "1") {
                        common.toast('fail', result.msg);
                    }
                    if (result.flag == "1") {
                        this.showScore = "1";
                        this.score = result.data;
                    }
                }
            },
            onConfirm(value) {
                this.stage = value;
                this.showPicker = false;
            },
            getCaptcha() {
                //获取一个新的图片验证码
                this.imgUrl = 'api/public/captcha?time=' + new Date();
            },
            goBack() {
                if (this.showScore == '0') {
                    this.$router.back();
                } else {
                    this.showScore = '0';
                }
            }
        }
    }
</script>

<style scoped>

</style>
